<script>
function load_member_page(){
	$('#membership').html('<img style=\'margin-top:100px;\' src=\'images/loading.gif\' align="absmiddle"/>'); 
	$.get(
		'center_member_ajax.php',{cid:<?=$_GET['cid']?>},
		function(data){
			$('#membership').html(data).hide().fadeIn('fast');;
			$('ul#icons li').hover(
				function() { $(this).addClass('ui-state-hover'); }, 
				function() { $(this).removeClass('ui-state-hover'); 
			});
	});
	$.get(
		'center_addmember_ajax.php',{cid:<?=$_GET['cid']?>},
		function(data){
			$('#membership2').html(data).hide().fadeIn('fast');;
			$('ul#icons li').hover(
				function() { $(this).addClass('ui-state-hover'); }, 
				function() { $(this).removeClass('ui-state-hover'); 
			});
	});
}
$(function(){
	load_member_page();
	$('#username').keyup(function() {
		$('#membership').html('<img style=\'margin-top:100px;\' src=\'images/loading.gif\' align="absmiddle"/>'); 
		$.post("center_member_ajax.php", { username: $("#username").val()}, 
			function(data){
				$("#membership").html(data);
			}
		);
	});
	
	$('#username2').keyup(function() {
		$('#membership2').html('<img style=\'margin-top:100px;\' src=\'images/loading.gif\' align="absmiddle"/>'); 
		$.post("center_addmember_ajax.php", { username: $("#username2").val()}, 
			function(data){
				$("#membership2").html(data);
			}
		);
	});
	
	$('#name').keyup(function() {
		$('#membership').html('<img style=\'margin-top:100px;\' src=\'images/loading.gif\' align="absmiddle"/>'); 
		$.post("center_member_ajax.php", { name: $("#name").val()}, 
			function(data){
				$("#membership").html(data);
			}
		);
	});
	
	$('#name2').keyup(function() {
		$('#membership2').html('<img style=\'margin-top:100px;\' src=\'images/loading.gif\' align="absmiddle"/>'); 
		$.post("center_addmember_ajax.php", { name: $("#name2").val()}, 
			function(data){
				$("#membership2").html(data);
			}
		);
	});
	
	$('#level').change(function(){
		$('#membership').html('<img style=\'margin-top:100px;\' src=\'images/loading.gif\' align="absmiddle"/>'); 
		$.get('center_addmember_ajax.php',{level:$('#level').val(),cid:<?=$_GET['cid']?>},
			function(data){
				$("#membership2").html(data);
			}
		);
	});
	$('#status').change(function(){
		$('#membership').html('<img style=\'margin-top:100px;\' src=\'images/loading.gif\' align="absmiddle"/>'); 
		$.get('center_addmember_ajax.php',{status:$('#status').val(),cid:<?=$_GET['cid']?>},
			function(data){
				$("#membership2").html(data);
			}
		);
	});
});

function active(id,status)
{
	$("#dialog_active").dialog({
		modal: true,
		buttons: {
			ตกลง: function() {
					$.get(
						'member_control.php',
						{id:id,status:status,action:'active'},
						function(data){
							if(status == 'online'){
								$('#active'+id).html("<a onclick=\"active("+id+",'offline')\" href=\"javascript:void(0);\"><span style=\"color:black;\">offline</span></a>").hide().fadeIn('slow');
							}else{
								$('#active'+id).html("<a onclick=\"active("+id+",'online')\" href=\"javascript:void(0);\"><span style=\"color:green;\">online</span></a>").hide().fadeIn('slow');
							}
					});
					$( this ).dialog( "close" );
				},
			ยกเลิก:function() {
					$( this ).dialog( "close" );
				}
		}
	});
}
function EditMember(id,mode)
{
	$('#member_dialog').html('<div align="center"><img style=\'margin-top:100px;\' src=\'images/loading.gif\' align="absmiddle"/></div>'); 
	$.get(
		'member_view.php',
		{id:id,action:mode},
		function(data){
			$('#member_dialog').html(data);
		}
	);
	$("#member_dialog").dialog({
		modal: true,
		width:400,
		position:'top',
		buttons: {
			ตกลง: function(){
				$.post('member_view.php',$('form#editmember').serialize(),function(data){
					if(data!=''){
						$('#msg').html(data);
						$('#dialog').dialog({
							model:true,
							buttons:{
								ตกลง:function(){
									$( this ).dialog( "close" );
								}
							}
						});
					}else{
						$('#member_dialog').dialog( "close" );
						load_member_page();
					}
				});
				$( this ).dialog( "close" );
			},
			ยกเลิก:function(){
				$( this ).dialog( "close" );
			}
		}
	});
}
function DeleteMember(id)
{
	$("#dialog2").dialog({
		modal: true,
		width:400,
		buttons: {
			ตกลง: function(){
				$.get('member_control.php',{id:id,action:'delete_center'},function(data){load_member_page();});
				$( this ).dialog( "close" );
			},
			ยกเลิก:function(){
				$( this ).dialog( "close" );
			}
		}
	});
}
function AddMember(id,cid)
{
	$.get('member_control.php',
		{id:id,action:'add_center',cid:cid},
		function(data){
			load_member_page();
		}
	);
}
function Comission(id)
{
	$("#dialog3").dialog({
		modal: true,
		
		buttons: {
			ตกลง: function(){
				$.get('member_control.php',{id:id,comission:$('#comission').val()},function(data){load_member_page();$('#comission').val('')});
				$( this ).dialog( "close" );
				
			},
			ยกเลิก:function(){
				$( this ).dialog( "close" );
			}
		}
	});
}
</script>
<div id="dialog_active" title="ข้อความ"  style="display:none;">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>ต้องการเปลี่ยนสถานะ?</p>
</div>
<div id="dialog2" title="ข้อความ"  style="display:none;">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>ต้องการลบออกจากศูนย์?</p>
</div>
<div id="dialog3" title="คอมมิสชั่น"  style="display:none; text-align:center;">
	<p><label>ระบุคอมมิสชั่น</label> <input type="text" id="comission" name="comission" /></p>
</div>
<div id="member_dialog" title="ข้อมูลสมาชิก"  style="display:none;"></div>
<div id="tabs">
    <ul>
    	<li><a class="head_tab" style="padding-left:7px;" href="#tabs-1"><span class="ui-icon ui-icon-person" style="float:left;"></span>สมาชิก</a></li>
        <li><a class="head_tab" style="padding-left:7px;" href="#tabs-2"><span class="ui-icon ui-icon-document" style="float:left;"></span>เพิ่มสมาชิก</a></li>
    </ul>
    <div id="tabs-1">
        	<ul id="panel">
            	<li><input type="text" id="username" name="username"  value="ค้นหาจากรหัสสมาชิก" onfocus="this.value=''"/></li>
                <li><input type="text" id="name" name="name"  value="ค้นหาจากชื่อสมาชิก" onfocus="this.value=''"/></li>
                <div style="clear:both;"></div>
            </ul>
    	<div id="membership" align="center"></div>          
    </div>
    <div id="tabs-2">
        <ul id="panel">
            	<li><input type="text" id="username2" name="username2"  value="ค้นหาจากรหัสสมาชิก" onfocus="this.value=''"/></li>
                <li><input type="text" id="name2" name="name2"  value="ค้นหาจากชื่อสมาชิก" onfocus="this.value=''"/></li>
                <li>
                	<select id="level"><option selected="selected" value="">เลือกระดับสมาชิก</option><option value="Basic">Basic</option><option value="Silver">Silver</option><option value="Gold">Gold</option><option value="Platinum">Platinum</option></select></li>
                    <li><select id="status"><option value="" selected="selected">เลือกสถานะ</option><option value="1">online</option><option value="0">offline</option></select></li>
                <div style="clear:both;"></div>
        </ul>
    	<div id="membership2" align="center"></div>     
    </div>
</div>            